<template>
	<div class="shell">
		<ul class="nav">
			<li :class="ac===1 ?'active':'' " id="logo">
				<span href="#home" @click="ac=1">
					<div class="icon">
						<div class="imageBox">
							<!-- <img src="./goat.jpg" alt=""> -->
						</div>
					</div>
					<div class="text">欢迎回来</div>
				</span>
			</li>
			<li :class="ac===2 ?'active':'' ">
				<span href="#user" @click="ac=2">
					<div class="icon">
						<i class="iconfont icon-cangku"></i>
					</div>
					<div class="text">user</div>
				</span>
			</li>
			<li :class="ac===3 ?'active':'' ">
				<span href="#message" @click="ac=3">
					<div class="icon">
						<i class="iconfont icon-tupian"></i>
					</div>
					<div class="text">message</div>
				</span>
			</li>
			<li :class="ac===4 ?'active':'' ">
				<span href="#tabs" @click="ac=4">
					<div class="icon">
						<div class="imageBox">
							<!-- <img src="./goat.jpg" alt=""> -->
						</div>
					</div>
					<div class="text">tabs</div>
				</span>
			</li>
			<li :class="ac===5 ?'active':'' ">
				<span href="#article" @click="ac=5">
					<div class="icon">
						<i class="iconfont icon-zhuti_tiaosepan"></i>
					</div>
					<div class="text">文章管理</div>
				</span>
			</li>
			<li :class="ac===6 ?'active':'' ">
				<span href="#official" @click="ac=6">
					<div class="icon">
						<i class="iconfont icon-qianbao"></i>
					</div>
					<div class="text">文案管理</div>
				</span>
			</li>
			<li :class="ac===7 ?'active':'' ">
				<span href="#writeA" @click="ac=7">
					<div class="icon">
						<i class="iconfont icon-erweima"></i>
					</div>
					<div class="text">写文章</div>
				</span>
			</li>
			<li :class="ac===8 ?'active':'' ">
				<span href="#writeO" @click="ac=8">
					<div class="icon">
						<i class="iconfont icon-dunpaibaoxianrenzheng"></i>
					</div>
					<div class="text">写文案</div>
				</span>
			</li>

		</ul>
	</div>

	<div v-if="ac===1" class="index">主页</div>
	<div v-if="ac===2" class="index">
		<User />
	</div>
	<div v-if="ac===3" class="index">
		<Message />
	</div>
	<div v-if="ac===4" class="index">
		<Tabs />
	</div>
	<div v-if="ac===5" class="index">
		<Article />
	</div>
	<div v-if="ac===6" class="index">
		<Copywriting />
	</div>
	<div v-if="ac===7" class="writing">
		<Writearticle/>
	</div>
	<div v-if="ac===8" class="writing">
		<Writeofficial/>
	</div>
</template>

<script setup>
	import User from './user/User.vue';
	import Message from './message/Message.vue';
	import Tabs from './tabs/Tabs.vue';
	import Article from './article/Article.vue';
	import Copywriting from './copywriting/Copywriting.vue';
	import Writearticle from './writing/writearticle.vue';
	import Writeofficial from './writing/writeofficial.vue';

	import {
		ref,
		reactive,
		onMounted
	} from "vue";

	const ac = ref(1);

	const user = ref({
		username: ''
	});


	onMounted(() => {

	});
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		list-style: none;
		text-decoration: none;
		color: #60ffa0;
	}



	.shell {
		position: fixed;
		width: 84px;
		height: 100%;
		background: #000000;
		z-index: 9999;
		transition: width 0.5s;
		padding-left: 10px;
		overflow: hidden;

		ul {
			position: relative;
			height: 100vh;

			li {
				position: relative;
				padding: 5px;
				margin: 20px 0px;
				cursor: pointer;
			}

			span {
				position: relative;
				display: flex;
				white-space: nowrap;
				// color: aquamarine;
			}
		}

		.active {
			background: #e4e9f5;
			border-top-left-radius: 50px;
			border-bottom-left-radius: 50px;

			.icon {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 60px;
				padding-left: 10px;
				height: 70px;
				color: #333;
				transition: 0.5s;
				color: rgb(255, 255, 255);

				i {
					font-size: 30px;
					z-index: 999;
				}
			}

			span .icon::before {
				content: "";
				position: absolute;
				inset: 5px;
				width: 60px;
				background: #000000;
				border-radius: 50%;
				transition: 0.5s;
				border: 7px solid #ffa117;
				box-sizing: border-box;
			}

			.text {
				position: relative;
				height: 70px;
				display: flex;
				align-items: center;
				font-size: 20px;
				color: #ffad32c1;
				padding-left: 15px;
				text-transform: uppercase;
				letter-spacing: 2px;
				transition: 0.5s;
			}
		}

		.active::before {
			content: "";
			position: absolute;
			top: -30px;
			right: 0;
			width: 30px;
			height: 30px;
			border-bottom-right-radius: 25px;
			box-shadow: 5px 5px 0 5px #e4e9f5;
			background: transparent;
		}

		.active::after {
			content: "";
			position: absolute;
			bottom: -30px;
			right: 0;
			width: 30px;
			height: 30px;
			border-top-right-radius: 25px;
			box-shadow: 5px -5px 0 5px #e4e9f5;
			background: transparent;
		}
	}

	.shell:hover {
		width: 300px;
	}

	.shell ul li:hover a .icon,
	.shell ul li:hover a .text {
		color: #ffa117;
	}

	// .sect {
	// 	width: 90%;
	// 	height: 90vh;
	// 	display: flex;

	// 	/* 水平方向靠右对齐 */
	// 	align-items: center;
	// 	/* 垂直方向居中对齐 */

	// 	/* 为了演示设置一个固定高度，实际中可根据需要调整 */
	// 	border: 1px solid gray;
	// 	/* 为了显示父元素范围添加边框 */
	// }
	// section {
	// 	position: relative;
	// 	width: 100%;
	// 	height: 100vh;
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// 	font: 900 100px '';
	// 	color: #ffa21759;
	// 	background: #e4e9f5;
	// }

	.index {
		width: 100vw;
		height: 100vh;
		background-color: #e4e9f5;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 100px;
	}

	.writing {
	    width: calc(100vw - 84px); /* 初始宽度为视口宽度减去左边距 */
	    height: 100vh;
	    margin-left: 84px;
	    // background-color: #aaffff;
	    transition: margin-left 0.5s ease, width 0.5s ease; /* 统一过渡时间 */
	}
	
	.shell:hover ~.writing {
	    margin-left: 300px;
	    width: calc(100vw - 300px); /* 宽度为视口宽度减去新的左边距 */
	    transition: margin-left 0.5s ease, width 0.5s ease; /* 统一过渡时间 */
	}
</style>